<script>
export default {
  name: "singleGap",
  props: {
    margin: {
      type: String,
      default: '0 0 0 0'
    },
    title: {
      type: String,
      default: ''
    },
    color: {
      type: String,
      default: '#4B4B4B'
    },
    isShowTitle:{
      type:Boolean,
      default:true
    }
  },
  methods: {
    click(){
      this.$emit('elementClick')
    }
  },
}
</script>

<template>
  <view class="singleGap row justify-between" :style="{
  margin:margin
}" @click.stop="click">
    <view class="singleGap_title row items-center" v-if="isShowTitle">
      <text class="singleGap_title_text" :style="{
        color:color
      }">{{ title }}</text>
    </view>
    <view class="singleGap_content">
      <slot></slot>
    </view>
  </view>
</template>

<style scoped lang="scss">
.singleGap {
  width: 702rpx;
  background: #FFFFFF;
  padding: 19rpx 18rpx;
  border-radius: 20rpx 20rpx 20rpx 20rpx;

  .singleGap_title {
    .singleGap_title_text {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 30rpx;
    }
  }
}
</style>